<template>
    <div class="jzInfo" jzInfo>
        <img :src="icon" :style="imgStyle">
        <div style="padding-left:20px">
            <div class="value" :style="valueStyle">
                {{data}}
                <span class="unit">{{unit}}</span>
            </div>
            <div class="label">{{label}}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        icon: String,
        label: String,
        unit: String,
        data: String|Number,
        valueStyle: Object,
        imgStyle: Object
    }
}
</script>
<style  lang="less" scoped>
.jzInfo[jzInfo] {
    display: flex;
    height: 96px;
    box-sizing: border-box;
    align-items: center;
    text-align: left;
    img {
        height: 96px;
    }
    .value {
        font-family: DINPro-Medium;
        font-size: 20px;
        color: #FFFFFF;
        letter-spacing: 1.2px;
        font-weight: 500;
    }
    .unit {
        opacity: 0.72;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        font-weight: 400;
    }
    .label {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        font-weight: 400;
        padding-top: 10px;;
        white-space: pre-line;
    }
}
</style>
